import React, { useState, useEffect } from 'react'
import './index.css'
import a5 from '../../../public/img/a5.png'
import Navigation from '../../compument/navigation'
import Hotspot from '../../compument/hotspot'
import Actualshooting from '../../compument/Actualshooting'
import Backgroundmusic from '../../compument/Backgroundmusic'
import Tool from '../../compument/tool'
import Portrait from '../../compument/Portrait'
import Thirteen from '../../compument/thirteen'
import Fourteen from '../../compument/fourteen'
import Fifteen from '../../compument/fifteen'
function Index() {

    const [showFhdb, setShowFhdb] = useState(false);
  
    useEffect(() => {
      const handleScroll = () => {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const windowHeight = window.innerHeight;
        const documentHeight = document.documentElement.scrollHeight;
        
        // 当滚动到顶部时隐藏，滚动到底部时显示
        if (scrollTop === 0) {
          setShowFhdb(false);
        } else if (scrollTop + windowHeight >= documentHeight - 100) {
          setShowFhdb(true);
        } else {
          setShowFhdb(false);
        }
      };
  
      window.addEventListener('scroll', handleScroll);
      return () => window.removeEventListener('scroll', handleScroll);
    }, []);

  return (
    <div className='one'>
      <div className='cbgn'>
      <Tool></Tool>
      </div>
      <div>
      {showFhdb && (
        <div className='fhdb' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
        <img src={a5} alt=""  style={{marginLeft:'25px',marginTop:'20px'}}/>
        </div>
      )}
      </div>
      <Navigation></Navigation>
    <div className='two'>
     
    </div>
    <div className='three'>

    </div>
<div className='four'>
      
    </div>
    <div className='five'>
      
    </div>
    <div className='six'>
      <Hotspot></Hotspot>
      </div>
        <div className='seven'>
          
        </div>
        <div className='eight'>
          <Actualshooting></Actualshooting>
          </div>
          <div className='nine'>
          
          </div>
          <div className='ten'>
          <Backgroundmusic></Backgroundmusic>
          </div>
          <div className='eleven'>
       <Portrait></Portrait>
          </div>
          <div className='twelve'>
       
          </div>
          <div className='thirteen'>
          <Thirteen></Thirteen>
          </div>
          <div className='fourteen'>
      <Fourteen></Fourteen>
          </div>
          <div className='fifteen'>
        <Fifteen></Fifteen>
          </div>
       
    </div>
  )
}

export default Index
